<template>
  <div class="type-contaniner">
    <van-nav-bar :title="title" left-arrow @click-left="onClickLeft"/>
    <!-- <List class="list" :productList="productList"/> -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad">

     <keep-alive>
        <div class="list">
          <van-cell class="product-card" v-for="item in productList" :key="item.key">
              <div class="picture">
                <img v-if="title === '观影推荐' || title === '电影排行'" @click="toDetails(item.id,item)" v-lazy="baseUrl + item.imgUrl" alt="">
                <img v-else @click="toAround(item.id,item)"  v-lazy="baseUrl + item.imgUrl" alt="">
              </div>
              <p>{{item.name}}</p>
              <div class="price">
                <div class="left">
                  <span v-if="item.like">
                    <small>收藏:{{ item.like }}</small>
                  </span>
                  <span v-else-if="item.sc">
                    <small>评分:{{ item.sc }}</small>
                  </span>
                  <span v-else>
                    ￥<span>{{item.price}}</span>
                  </span>
                </div>
                <div class="right">
                  <div class="add-cart" @click="addCart(item.id)"><van-icon name="shopping-cart-o" color="#ffffff" size="0.9rem"/></div>
                </div>    
              </div>
          </van-cell>
        </div>
     </keep-alive>
    </van-list>
  </div>
</template>



<script>
  import List from '../components/list.vue'
  import { getAroundProduct, getMovieProduct, getProductInfo } from '../../apis/indexApi'

  export default {
    data() {
      return {
        title:'错误',
        productList:[],

        all:0,
        size:10,

        list: [],
        loading: false,
        finished: false,

        
        page: 1,
        size: 50,

        baseUrl:'http://10.7.162.81:15666'
      }
    },
    
    components:{
      List
      // productList
    },

    created () {
      let type = this.$route.params.type
      if (type === 'priceLow') {
        this.title = '周边特惠'
      }else if(type === 'aroundRanking'){
        this.title = '周边排行'
      }else if(type === 'Move'){
        this.title = '观影推荐'
      }else{
        this.title = '电影排行'
      }
    },

    methods: {
      
        toAround(id,item){
          this.$router.push({
              name:'around',
              params:{
                id,
                item
              }
          })
        },
        // 详情页面
        toDetails(id,item){
          this.$router.push({
            name:'move',
            params:{
              id,
              item
            }
          })
        },
       // 返回首页页面
        onClickLeft(){
            this.$router.push('/index/home')
        },

        // 添加购物车
        addCart(id){
            let product = this.productList.find(item => item.id === id)
            let data = {
                userId: this.$store.getters['common/user'].id, 
                price: product.price, 
                id: product.id, 
                time: new Date(), 
                count: 1, 
                name: product.name, 
                detailaddress: '无', 
                bgUrl: product.imgUrl
            }
            getProductInfo(data).then(resolve => {
                if(resolve.code === 200){
                    this.$toast('加入购物车成功');
                }else{
                    this.$toast('加入购物车失败');
                }
            })
        },

        onLoad() {
          if (this.title === '周边特惠') {
            getAroundProduct({page:this.page, size:this.size}).then(resolve => {
                resolve.data.rows.forEach(item => {
                    let obj = {
                        key:Math.random() + item.id,
                        id: item.itemsId,
                        imgUrl: item.itemsImg,
                        name: item.name,
                        price: Number(item.price)
                    }
                    this.productList.push(obj)

                    this.productList.sort((a,b)=>{ return a.price-b.price})//升序
                    // 加载状态结束
                    this.loading = false;
                })

                
              // 加载完成
              this.finished = true
                // if (this.page * this.size >= resolve.data.total) {
                //   this.finished = true
                // }
                // console.log(typeof this.productList[0].price);
                // this.page += 1
            })
            return
          }

          if (this.title === '周边排行') {
            getAroundProduct({page:this.page, size:this.size}).then(resolve => {
                resolve.data.rows.forEach(item => {
                    let obj = {
                        key:Math.random() + item.id,
                        id: item.itemsId,
                        imgUrl: item.itemsImg,
                        name: item.name,
                        price: item.price,
                        like: item.like
                    }
                    this.productList.push(obj)
                    this.productList.sort((a,b)=>{ return b.like-a.like}) // 降序
                    // 加载状态结束
                    this.loading = false;
                })

                
              // 加载完成
              this.finished = true
                // if (this.page * this.size >= resolve.data.total) {
                //   this.finished = true
                // }
                // this.page += 1
            })
            return
          }

          if (this.title === '观影推荐') {
            getMovieProduct({page:this.page, size:10}).then(resolve => {
                resolve.data.rows.forEach(item => {
                    let obj = {
                        key:Math.random() + item.id,
                        id: item.id,
                        imgUrl: item.img,
                        name: item.name,
                        price: item.dur
                    }
                    this.productList.push(obj)
                    // 加载状态结束
                    this.loading = false;
                })

                
              // 加载完成
              // this.finished = true
                if (this.page * 10 >= resolve.data.total) {
                  this.finished = true
                }
                this.page += 1
            })
            return
          }

          // 评分
          getMovieProduct({page:this.page, size:this.size}).then(resolve => {
              
              resolve.data.rows.forEach(item => {
                  let obj = {
                      key:Math.random() + item.id,
                      id: item.id,
                      imgUrl: item.img,
                      name: item.name,
                      price: item.dur,
                      sc:item.sc
                  }
                  this.productList.push(obj)
                  this.productList.sort((a,b)=>{ return b.sc-a.sc}) // 降序
                  // 加载状态结束
                  this.loading = false;
              })

              // 加载完成
              this.finished = true

              // if (this.page * this.size >= resolve.data.total) {
              // }
              // this.page += 1
          })
        },
    }
  }
</script>

<style lang="less" scoped>
  .type-contaniner{
    height: 100%;
    .van-list{
      height: calc(100% - 46px);
      overflow-x: hidden;
    }
    .list{
        width: 100%;
        padding: 0px 14px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .product-card{
            width: 48%;
            height: 220px;
            padding: 0 10px;
            border-radius: 8px;
            background-color: white;
            flex-shrink: 0;
            margin-bottom: 14px;
            .picture{
                width: 100%;
                height: 66%;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            p{
                height: 10%;
                font-size: 0.85rem;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                margin: 7px 0px;
            }
            .price{
                height: 15%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .left{
                    font-size: 0.6rem;
                    color: rgb(255,43,89);
                    span{
                        font-size: 0.85rem;   
                    }
                }
                .right{
                    display: flex;
                    height: 75%;
                    .add-cart{
                        width: 30px;
                        height: 25px;
                        text-align: center;
                        line-height: 25px;
                        border-top-left-radius: 15px;
                        border-bottom-left-radius: 15px;
                        background-color: rgb(247, 168, 3);
                    }
                    .buy{
                        width: 30px;
                        height: 25px;
                        text-align: center;
                        line-height: 25px;
                        font-size: 0.5rem;
                        border-top-right-radius: 15px;
                        border-bottom-right-radius: 15px;
                        background-color: rgb(255,25,13);
                        color: #fff;
                    }
                }   
            }
        }
    }
  }
</style>